import * as ImagePicker from 'expo-image-picker';
import React, { useState } from 'react';
import { Alert, Button, Image, ScrollView, StyleSheet, Text, TextInput } from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

export default function CreateStoreScreen() {
  const [storeImage, setStoreImage] = useState<string | null>(null);
  const [licenseImage, setLicenseImage] = useState<string | null>(null);
  const [province, setProvince] = useState<string>('');
  const [city, setCity] = useState<string>('');
  const [district, setDistrict] = useState<string>('');
  const [address, setAddress] = useState<string>('');
  const [contactName, setContactName] = useState<string>('');
  const [contactPhone, setContactPhone] = useState<string>('');

  const pickImage = async (setter: React.Dispatch<React.SetStateAction<string | null>>) => {
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      alert("需要允许访问相册权限！");
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: "images",
      quality: 1,
    });

    if (!result.canceled) {
      setter(result.assets[0].uri);
    }
  };

  const handleSubmit = () => {
    if (!storeImage || !licenseImage || !province || !city || !district || !address || !contactName || !contactPhone) {
      Alert.alert("提示", "请填写完整信息");
      return;
    }

    const storeData = {
      storeImage,
      licenseImage,
      province,
      city,
      district,
      address,
      contactName,
      contactPhone
    };

    console.log("提交的店铺信息:", storeData);
    Alert.alert("成功", "店铺信息已提交！");
  };

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.label}>店铺门头照</Text>
      <Button title="上传门头照" onPress={() => pickImage(setStoreImage)} />
      {storeImage && <Image source={{ uri: storeImage }} style={styles.image} />}

      <Text style={styles.label}>营业执照</Text>
      <Button title="上传营业执照" onPress={() => pickImage(setLicenseImage)} />
      {licenseImage && <Image source={{ uri: licenseImage }} style={styles.image} />}

      <Text style={styles.label}>省</Text>
      <RNPickerSelect
        onValueChange={(value) => setProvince(value)}
        items={[
          { label: '广东省', value: '广东省' },
          { label: '北京市', value: '北京市' },
        ]}
        placeholder={{ label: '请选择省', value: null }}
        style={pickerSelectStyles}
      />

      <Text style={styles.label}>市</Text>
      <RNPickerSelect
        onValueChange={(value) => setCity(value)}
        items={[
          { label: '广州市', value: '广州市' },
          { label: '深圳市', value: '深圳市' },
        ]}
        placeholder={{ label: '请选择市', value: null }}
        style={pickerSelectStyles}
      />

      <Text style={styles.label}>区</Text>
      <RNPickerSelect
        onValueChange={(value) => setDistrict(value)}
        items={[
          { label: '天河区', value: '天河区' },
          { label: '南山区', value: '南山区' },
        ]}
        placeholder={{ label: '请选择区', value: null }}
        style={pickerSelectStyles}
      />

      <Text style={styles.label}>详细地址</Text>
      <TextInput
        style={styles.input}
        placeholder="请输入详细地址"
        value={address}
        onChangeText={setAddress}
      />

      <Text style={styles.label}>联系人</Text>
      <TextInput
        style={styles.input}
        placeholder="请输入联系人姓名"
        value={contactName}
        onChangeText={setContactName}
      />

      <Text style={styles.label}>联系方式</Text>
      <TextInput
        style={styles.input}
        placeholder="请输入联系方式"
        value={contactPhone}
        onChangeText={setContactPhone}
        keyboardType="phone-pad"
      />

      <Button title="提交" onPress={handleSubmit} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  label: {
    marginTop: 16,
    marginBottom: 8,
    fontSize: 16,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    padding: 10,
  },
  image: {
    width: '100%',
    height: 200,
    marginTop: 8,
    marginBottom: 16,
  },
});

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 16,
    paddingHorizontal: 12,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    color: 'black',
    paddingRight: 30,
    marginBottom: 8,
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    color: 'black',
    paddingRight: 30,
    marginBottom: 8,
  },
  inputWeb: {
    fontSize: 16,
    paddingHorizontal: 12,
    paddingVertical: 8,
    minHeight:40,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    color: 'black',
    paddingRight: 30,
    marginBottom: 8,
  },
});